<!--
 * @Description: 申请售后详情页
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-10-16 11:15:05
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="content">
    <view
      class="header txbox"
      v-for="item in orderData.goodsList"
      :key="item.id"
    >
      <view style="border-radius: 10rpx; margin-right: 20rpx">
        <van-image
          width="100rpx"
          height="100rpx"
          :src="item.skuImage"
          style="border-radius: 30rpx"
        />
      </view>
      <view>
        <view class="jcwz overwz" style="width: 350rpx">{{ item.name }}</view>
        <view class="hswz" style="margin: 20rpx 0">
          规格: {{ item.otherCheckStr }}
        </view>
        <view class="hswz" style="margin: 20rpx 0">
          数量:
          <u-number-box
            class="step"
            :min="1"
            :max="item.count"
            v-model="refund.count"
            @change="handleNumberChange"
            size="30"
          ></u-number-box>
        </view>
      </view>
    </view>
    <view class="middle">
      <view class="middle-t">
        <!-- <view class="txbox2 jgbox" @click="showApplyType = true">
          <view class="hswz">申请类型</view>
          <view
            >{{ applyReasonObj.text }}<u-icon name="arrow-right"></u-icon
          ></view>
        </view> -->
        <!-- 退款显示 -->
        <view class="txbox2 jgbox" v-if="applyReasonObj.id == 1">
          <view class="hswz">申请类型</view>
          <view
            ><text>{{ applyReasonObj.text }}</text
            ><u-icon name="arrow-right"></u-icon
          ></view>
        </view>
        <!-- 非退货显示 -->
        <view class="txbox2 jgbox" v-if="applyReasonObj.id != 3">
          <view class="hswz">预计退款金额</view>
          <view
            ><text style="color: red; font-size: 32rpx"
              >￥{{ refundPrice }}</text
            >
          </view>
        </view>
        <view class="txbox2 jgbox" v-if="applyReasonObj.id != 3">
          <view class="hswz"
            >预计退{{ enumAll.SHOPMODEL[orderData.shopMode] }}
          </view>
          <view
            ><text style="color: red; font-size: 32rpx"
              >￥{{ refundScore }}</text
            >
          </view>
        </view>
        <view
          class="txbox2 jgbox"
          v-if="
            applyReasonObj.id != 3 &&
            orderData.shopMode == 4 &&
            refundOtherMoney
          "
        >
          <view class="hswz">预计退服务费 </view>
          <view
            ><text style="color: red; font-size: 32rpx"
              >￥{{ refundOtherMoney }}</text
            >
          </view>
        </view>
        <view class="txbox2" @click="showReason = true">
          <view class="hswz">申请原因</view>
          <view>{{ applyReason }}<u-icon name="arrow-right"></u-icon></view>
        </view>
      </view>
      <!-- 退款退货和换货显示 -->

      <view class="middle-b">
        <view> 申请说明 </view>
        <view class="hswz" style="margin: 20rpx 0">
          <u-input
            v-model="explain"
            placeholder="请输入详细的申请说明"
            type="textarea"
          ></u-input>
        </view>
        <!-- <view>
          <text class="hswz">上传图片(最多上传3张图片)</text>
          <u-upload
            :max-size="5 * 1024 * 1024"
            max-count="3"
            name="object"
            action="https://api.blacksilverscore.com/base/api/v1/ali/sendFile"
            :header="{
              Authorization: `Bearer ${userToken}`
            }"
            :limitType="['png', 'jpg', 'jpeg']"
            @on-change="handleChange"
            @on-success="handleSuccess"
            @on-error="handleError"
          ></u-upload>
        </view> -->
      </view>
    </view>
    <view class="footer">
      <u-button type="primary" @click="handleSubmit">提交申请</u-button>
    </view>
    <!-- 选择售后类型弹框 -->
    <!-- <ApplyType
      :visible="showApplyType"
      @close="showApplyType = false"
      @confirm="handleTypeConfirm"
    >
    </ApplyType> -->
    <!-- 选择商品状态弹框 -->
    <GoodsStatu
      :visible="showGoods"
      @close="showGoods = false"
      @confirm="handleGoodsConfirm"
    >
    </GoodsStatu>
    <!-- 选择售后原因弹框 -->
    <ApplyReason
      :visible="showReason"
      @close="showReason = false"
      @confirm="handleReasonConfirm"
    ></ApplyReason>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { orderApi, userApi, enumAll } from '@/api'
import { moneyUtils } from '@/utils/money'
import GoodsStatu from './goodsStatu.vue'
import ApplyReason from './applyReason.vue'
const applyReasonObj = ref()
const orderId = ref()
const orderProductSkuId = ref()
const addressObj = ref<any>({})
const applyReason = ref('')
const refundPrice = ref(0) //退款金额
const refundScore = ref(0) //退款券

const goodsStatus = ref('')
const explain = ref('')
const showApplyType = ref(false)
const showGoods = ref(false)
const showReason = ref(false)
const userToken = uni.getStorageSync('accessToken')
// 商品列表
const orderData = reactive({
  goodsList: [] as any,
  shopMode: uni.getStorageSync('shopMode'),
  orderStatus: ''
})
// 退款
const refund = reactive({
  refundExplain: '',
  refundStatus: 1,
  orderProductSkuId: '',
  refundType: null,
  refundTypeStr: '',
  count: 1
})
// #region ******************************* 订单详情/提交申请 ********************/
//从订单进入的
const byOrderId = async () => {
  const { data } = await orderApi.skuBaseInfo({
    detail: true,
    id: orderProductSkuId.value
  })
  // 商品详情
  orderData.goodsList.push(data)
  refund.orderProductSkuId = orderData.goodsList[0].id
  refund.count = orderData.goodsList[0].count
  refundPrice.value = orderData.goodsList[0]?.totalMoney
  refundScore.value = orderData.goodsList[0]?.scoreMoney
}

// 提交申请
const handleSubmit = async () => {
  if (applyReason.value == '') {
    uni.showToast({
      title: '请选择申请原因',
      icon: 'none',
      duration: 2000
    })
    return
  }
  if (explain.value == '') {
    uni.showToast({
      title: '请填写申请说明',
      icon: 'none',
      duration: 2000
    })
    return
  }
  refund.refundExplain = applyReason.value + ':' + explain.value
  refund.refundType = applyReasonObj.value.id

  const { code, msg } = await orderApi.refundAdd(refund)
  if (code == 200) {
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000
    })
    uni.navigateTo({
      url: `/packageG/pages/supplyChainOrder/orderDetail?orderId=${orderId.value}`
    })
  } else {
    uni.showToast({
      title: '提交失败,' + msg,
      icon: 'error',
      duration: 2000
    })
  }
}

const refundOtherMoney = computed(() => {
  return moneyUtils.xinfuService(refundScore.value)
})
// #endregion
const handleNumberChange = (e: any) => {
  const goods = orderData.goodsList[0]
  const price = goods.totalMoney / goods.count
  const score = goods.scoreMoney / goods.count
  refundPrice.value = price * e.value
  refundScore.value = score * e.value
}

const handleGoodsConfirm = (zt: any) => {
  refund.refundType = zt.id
  refund.refundTypeStr = zt.name
}
const handleReasonConfirm = (reason: string) => {
  applyReason.value = reason
}

onLoad((option: any) => {
  orderId.value = option.orderId
  orderProductSkuId.value = option.orderProductSkuId
  byOrderId()
  applyReasonObj.value = JSON.parse(uni.getStorageSync('applyObj'))
})
</script>
<style lang="less" scoped>
.content {
  font-size: 24rpx;
  padding: 20rpx;
  .header {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }
  .middle {
    .middle-t,
    .middle-m,
    .middle-b {
      padding: 20rpx;
      font-size: 28rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }
  }
  .footer {
    padding: 20rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
.jcwz {
  font-size: 28rpx;
  font-weight: bold;
}
.hswz {
  font-size: 28rpx;
  color: #7f7e7e;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.txbox {
  display: flex;
  align-items: center;
}
.txbox2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jgbox {
  margin-bottom: 20rpx;
}
</style>
